<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/jsp/taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
		<meta http-equiv="x-dns-prefetch-control" content="on" />
		<meta name="version" content="20161115">
		<title>个人信息</title>
		<link rel="stylesheet" href="${ctx}/static/member/css/bootstrap.min.css">
	    <script src="${ctx}/static/member/js/jquery-2.1.4.min.js"></script>
	    <script src="${ctx}/static/member/js/bootstrap.min.js"></script>
	    <link rel="stylesheet" href="${ctx}/static/member/css/mui.min.css">
	    <link rel="stylesheet" href="${ctx}/static/member/css/mui.picker.css" />
	    <link rel="stylesheet" href="${ctx}/static/member/css/mui.poppicker.css"/>
		<link rel="stylesheet" href="${ctx}/static/member/css/style.css"/>
	</head>
	<body class="w-message">
		<div class="mui-page-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll mui-mine">
					<div class="myPic">
						<i class="glyphicon glyphicon-menu-right"></i>
						<div class="title">
							头像
						</div>
						<div class="pic">
							<c:choose>
		                        <c:when test="${loginMember.avatar != null && loginMember.avatar != ''}">
		                                <img src="${loginMember.avatar}" id="userIcon"/>
		                        </c:when>
		                        <c:otherwise>
		                                <img src="images/main-1.png" alt="" id="userIcon"/>
		                        </c:otherwise>
		                    </c:choose>
							<input type="file" id="imgUpload" name="file1" draggable="false" single accept="image/*">
						</div>
					</div>
					<div class="myName">
						<div class="title">
							昵称
						</div>
						<input class="eh-font15 eh-c5a" type="text" placeholder="请输入昵称" value="" maxlength="15">
						<i class="glyphicon glyphicon-menu-right"></i>
					</div>
					<div class="myState">
						<div class="title">
							状态
						</div>
						<input id='showUserPicker' class="eh-font15 eh-c5a" type="text" value="" placeholder="请选择状态">
						<i class="glyphicon glyphicon-menu-right"></i>
					</div>
					<div class="mySex">
						<div class="title">
							性别
						</div>
						<input id='showSexPicker' class="eh-font15 eh-c5a" type="text" value="" placeholder="请选择性别">
						<i class="glyphicon glyphicon-menu-right"></i>
					</div>

					<div class="myAge">
						<div class="title">
							年龄
						</div>
						<input class="eh-font15 eh-c5a" type="text" placeholder="请输入年龄" maxlength="4">
						<i class="glyphicon glyphicon-menu-right"></i>
					</div>
					<div class="myBottom">
						<button>确认</button>
					</div>
				</div>
			</div>
		</div>
		<script src="${ctx}/static/member/js/mui.min.js"></script>
		<script src="${ctx}/static/member/js/mui.picker.js"></script>
		<script src="${ctx}/static/member/js/mui.poppicker.js"></script>
		<script src="${ctx}/static/member/js/uploadImg.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//上传图片
			$(function() {
				$("img").click(function() {
					$("#imgUpload").click();
				})
				previewImage();
			});
			(function($, doc) {
				$.init();
				$.ready(function() {
					//性别
					var sexPicker = new $.PopPicker();
					sexPicker.setData([{
						value: '0',
						text: '女'
					}, {
						value: '1',
						text: '男'
					}, {
						value: '0',
						text: '未知'
					}]);
					var showSexPickerButton = doc.getElementById('showSexPicker');
					var sexResult = doc.getElementById('showSexPicker');
					showSexPickerButton.addEventListener('tap', function(event) {
						sexPicker.show(function(items) {
							sexResult.value = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//级联示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '0',
						text: '备孕'
					}, {
						value: '1',
						text: '育儿'
					}, {
						value: '2',
						text: '怀孕'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('showUserPicker');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.value = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);

				});
			})(mui, document);
		</script>
	</body>

</html>